<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>侧边栏</title>
</head>

<body>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏sidebar</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /* html, body{
    width: 100%;
    height: 100%;
} */

      a {
        text-decoration: none;
      }

      ul,
      ol {
        list-style: none;
      }

      .header {
        height: 80px;
        box-shadow: 0 0 10px rgb(0 0 0 / 10%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
      }

      .btn {
        padding: 8px 20px;
        background: #317aae;
        color: #fff;
        border: 0;
        border-radius: 2px;
        ;
      }

      #toggle-sidebar {}

      .sidebar {
        width: 200px;
        height: 100vh;
        border-right: 1px solid #ccc;
        position: absolute;
        left: 0;
        top: 0;
        background: rgb(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* 
        transform(变换)
        translate(位移): x水平，y垂直，z垂直于屏幕
    */
        transform: translateX(-200px);
        /* 
        transition(过渡): property duration timing-function
    */
        transition: transform 0.2s ease;
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .sidebar-menu li {
        height: 50px;
        line-height: 50px;
        text-indent: 20px;
        cursor: pointer;
      }

      .sidebar-menu li.highlighted {
        background: #317aae;
        color: #fff;
      }


      .footer {
        height: 50px;
        border-top: 1px solid #222;
        text-align: center;
        line-height: 50px;
      }

      /* 
.container{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
}

.container h1, .container p{
    color: #fff;
}
 */

      .container {
        width: 800px;
        height: 300px;
        text-align: center;
        position: absolute;
        left: 50%;
        margin-left: -400px;
        top: 50%;
        margin-top: -150px;
      }

      .darkmode {
        background: rgba(0, 0, 0, .5);
      }
    </style>
  </head>

  <body>
    <div class="header">
      <div class="header-nav"></div>
      <button class="btn" id="toggle-sidebar">Sidebar</button>
    </div>
    <div class="sidebar" id="app-sidebar">
      <ul class="sidebar-menu" id="sidebar-menu">
        <li class="highlighted">Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
      <div class="footer">
        &copy; 2022
      </div>
    </div>


    <main class="container">
      <h1>Lorem ipsum dolor</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, voluptatem.
      </p>
      <button id="theme-btn-dark" class="btn">切换暗黑主题</button>
      <button id="theme-btn-light" class="btn">切换明亮主题</button>
    </main>

    <script src="./helpers.js"></script>
    <!-- <script src="./main.js"></script> -->

    <script>

      const btnToggleSidebar = document.querySelector('#toggle-sidebar')
      const appSidebar = document.querySelector('#app-sidebar')
      const sidebarMenus = document.querySelectorAll('#sidebar-menu li')
      const btnDark = document.querySelector('#theme-btn-dark')
      const btnLight = document.querySelector('#theme-btn-light')

      btnToggleSidebar.onclick = function () {
        toggleClass(appSidebar, 'show')
      }

      for (let i = 0; i < sidebarMenus.length; i++) {
        sidebarMenus[i].onclick = function () {
          for (let i = 0; i < sidebarMenus.length; i++) {
            removeClass(sidebarMenus[i], 'highlighted')
          }
          addClass(this, 'highlighted')
        }

      }



      // 主题控制
      btnDark.onclick = function () {
        switchMode({
          element: "body",
          isDarkMode: true,
        });
      };

      btnLight.onclick = function () {
        switchMode({
          element: "body",
          isDarkMode: false,         
        });
      };
      /**
       * @description 完成风格的切换
       * @param {Object} mode 风格对象
       * @param {string} mode.element - 切换风格的 dom 元素（选择器）
       * @param {Boolean} mode.dark - 是否为暗黑风格
       */

      const switchMode = function (mode) {
        const element = document.querySelector(mode.element)
        if (mode.isDarkMode) {
          addClass(element, 'darkmode');
        } else {
          removeClass(element, 'darkmode');
        }
      };
    </script>
  </body>

  </html>
</body>

</html>